<template>
    <v-card>
        <v-card-title primary-title class="green darken white--text">
            <h3 class="headline mb-0 white--text">登录</h3>
        </v-card-title>
        <v-card-text class="pl-4 pr-4">
            <form>
                <v-text-field
                    label="E-mail"
                    v-model="email"
                    :error-messages="errors.collect('email')"
                    v-validate="'required|email'"
                    data-vv-name="email"
                    @input="$v.email.$touch()"
                    @blur="$v.email.$touch()"
                    required
                ></v-text-field>
                <v-text-field
                    label="Password"
                    v-model="password"
                    v-validate="'required|max:30|min:6'"
                    :error-messages="errors.collect('password')"
                    data-vv-name="password"
                    :counter="30"
                    @input="$v.password.$touch()"
                    @blur="$v.password.$touch()"
                    required
                ></v-text-field>
                <v-checkbox label="记住密码" v-model="remember_pwd"></v-checkbox>
                <v-layout justify-space-between>
                  <v-btn @click="submit" class="green lighten-1 ma-0">submit</v-btn>
                  <v-btn @click="clear" class="ma-0">clear</v-btn>
                </v-layout>
              </form>
        </v-card-text>
    </v-card>
</template>

<script>
  import axios from 'axios'
  export default {
    layout: 'center',
    name: 'Login',
    $validates: true,
    data: () => ({
      email: '',
      password: '',
      remember_pwd: null
    }),
    methods: {
      submit () {
        this.$validator.validateAll()
        axios.get('http://mnoteserver.dev.com/test')
          .then(function (response) {
            console.log(response.data)
          })
          .catch(function (error) {
            console.log(error)
          })
      },
      clear () {
        this.email = ''
        this.password = ''
        this.remember_pwd = null
        this.$validator.clean()
      }
    }
  }
</script>

<style>

</style>
